<template>
  <div>
    <div id="top">
     <div id="avatar">
       <van-image
         round
         width="5rem"
         height="5rem"
         src="https://img.yzcdn.cn/vant/cat.jpeg"
       />
       <p style="margin-top: 0.3rem">{{userName}}</p>
     </div>
     <div id="point">
       <div style="position:absolute; left:2rem;"><p style="display: inline-block;color: black">积分：</p>{{points}}</div>
       <div style="position:absolute; right: 2rem" >
         <van-button plain type="info" to="getPoints/pointsRecord" round size="small">积分记录</van-button>
       </div>
     </div>
    </div>
    <div id="middle">
      <ul id="toolBar">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
      <div id="scrollPic">
        <van-swipe class="my-swipe" :autoplay="3000">
          <van-swipe-item v-for="(image, index) in images" :key="index">
            <img v-lazy="image"/>
          </van-swipe-item>
        </van-swipe>
      </div>
    </div>
    <div id="foot">
      <ul id="loveAndReduce">
        <li :class="{'active':love}" @click="change(1)">猜你喜欢</li>
        <li :class="{'active':reduce}" @click="change(2)">最新优惠</li>
      </ul>
      <ul id="filter">
        <li>筛选</li>
        <li style="color: #39a9ed">{{goodsName}}</li>
      </ul>
      <ul id="goodsPic">
        <li  v-for="item in goodsList">
          <div class="goodsPic" :style="{backgroundImage: 'url(' + item.img + ')', backgroundRepeat:'no-repeat', backgroundSize: 'cover',backgroundPosition:'center center'}"></div>
          <p class="title">{{item.title}}</p>
          <p class="price">{{item.price}}</p>
        </li>
<!--        <li></li>-->
<!--        <li></li>-->
<!--        <li></li>-->
      </ul>
    </div>

  </div>
</template>

<script>
    export default {
        name: "principle",
        data() {
            return{
              userName:'Lili',
              points:78000000000000000,
              images: [
                'https://img.yzcdn.cn/vant/apple-1.jpg',
                'https://img.yzcdn.cn/vant/apple-2.jpg',
                'https://img.yzcdn.cn/vant/apple-1.jpg'
              ],
              love:true,
              reduce:false,
              goodsName:"出行券",
              goodsList:[
                {img:"https://img.yzcdn.cn/vant/apple-1.jpg",
                title:"地铁出行券",
                price:"300积分"},
                {img:"https://img.yzcdn.cn/vant/apple-1.jpg",
                  title:"地铁出行券",
                  price:"300积分"},
                {img:"https://img.yzcdn.cn/vant/apple-1.jpg",
                  title:"地铁出行券",
                  price:"300积分"},
                {img:"https://img.yzcdn.cn/vant/apple-1.jpg",
                  title:"地铁出行券",
                  price:"300积分"},
                {img:"https://img.yzcdn.cn/vant/apple-1.jpg",
                  title:"地铁出行券",
                  price:"40积分"},
              ],
            }
          },
      methods:{
          change(num){
            if(num==1){
              this.love=true
              this.reduce=false
            }else if (num==2){
              this.love=false
              this.reduce=true
            }
          }
      }
    }
</script>

<style scoped>
#top{
  width: 100%;
  height:13rem;
  background: red;
  overflow: hidden;
}
#avatar{
    height:7rem;
    background: #42b983;
    margin-top:1rem;
  }
#point{
  height: 2rem;
  width: 100%;
  line-height: 2rem;
  background: #444444;
  color:#41B4EB;
  font-size: 1rem;
  margin-top: 1rem;
}
#toolBar{
  background: #41B4EB;
  width:100%;
  height: 4rem;
  }
#toolBar>li{
    float: left;
    height: 100%;
    width: 4rem;
    background: #42b983;
    margin-left: 1.3rem;
  }
  #scrollPic{
    margin-top:1rem;
  }
  .my-swipe{
    height: 10rem;
    background-color: #39a9ed;
  }
.my-swipe .van-swipe-item>img{
  display: inline-block;
  width: 95%;
}
#loveAndReduce{
  height: 2rem;
  background: bisque;
  margin-top:1.2rem ;
  border-bottom: #999999 solid 0.15rem;
}
#loveAndReduce>li{
  height: 2rem;
  width: 50%;
  float: left;
  font-size: 1rem;
  line-height: 2rem;
}
  .active{
    border-bottom :#39a9ed solid 0.15rem;
    color:#39a9ed;
  }
  #filter{
    height: 2rem;
  }
  #filter>li{
    height: 2rem;
    width: 20%;
    float: left;
    font-size: 0.8rem;
    line-height: 2rem;
    background: #42b983;
  }
  #goodsPic{
    width: 100%;
    height: 13rem;
    padding-left: 2.8%;
  }
#goodsPic>li{
  background: papayawhip;
  height: 7.6rem;
  width: 44%;
  border: #39a9ed solid 0.1rem;
  float: left;
  margin-bottom: 2rem;
  margin-right: 1rem;
  position: relative;
  padding-top: 0.3rem;
}
.goodsPic{
  position: absolute;
  height: 5.2rem;
  width: 90%;
  left: 5%;
}
  .title{
    font-size: 0.9rem;
    position: absolute;
    left: 0;
    bottom: 0;
    left: 0.5rem;
    bottom: 1rem;
    letter-spacing:0.1rem;
    font-weight: bold;
  }
  .price{
    font-size: 0.8rem;
    position: absolute;
    right: 0.5rem;
    bottom: 0.2rem;
    color: #39a9ed;
  }
</style>
